<template>
<div class="login">
  <van-nav-bar title="会员登录"  left-arrow />
  <div class="container">
    <div class="title">
    <h3>手机号登录</h3>
    <p>未注册的手机号后将自动注册</p>
  </div>
  <div class="form">
    <div class="from-item">
      <input type="text" v-model="mobile" class="input" placeholder="请输入手机号" maxlength="11">
    </div>
    <div class="from-item">
      <input type="text" v-model="picKey" class="input" placeholder="请输入图形验证码" maxlength="4">
      <img v-if="picCode" :src="picCode" @click="getPicCodes"  alt="">
    </div>
    <div class="from-item">
      <input type="text" v-model="inp" class="input" maxlength="16" placeholder="密码">
    </div>
        <button @click="login" class="denlu-btn">登录</button>
    </div>
  </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Toast } from 'vant'
import { getPicCode, login } from '@/api/login'
import { useMemberStore } from '@/strres/modules/member'

Vue.use(NavBar)
export default {
  data () {
    return {
      mobile: '15751776629',
      inp: '246810',
      picCode: '',
      picKey: ''
    }
  },
  async created () {
    this.getPicCodes()
  },
  methods: {
    loginSuccess (Profile) {
      // 保存会员信息
      const memberStore = useMemberStore()
      Toast.success('成功登录')
      memberStore.setProfile(Profile)
      const url = this.$route.query.backUrl || '/'
      this.$router.replace(url)
    },
    validFn () {
      if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
        console.log('请输入正确的手机号')
        return false
      }
      if (!/^\w{4}$/.test(this.picKey)) {
        console.log('请输入正确的图形验证码')
        return false
      }
      return true
    },
    async getPicCodes () {
      const res = await getPicCode()
      console.log(res)
      this.picCode = res.data.data.base64
      this.picKey = res.data.data.Key
    },
    async login () {
      if (!this.validFn()) {
        return
      }
      const res = await login(this.mobile, this.inp)
      console.log(res)
      this.loginSuccess(res.data.data)
    }
  }
}
</script>

<style lang=scss scoped>
.container{
  margin: 10px 20px 10px 20px;
  .title{
    margin: 30px 0;
    h3{
      font-size: 30px;
     font-weight: 500;
     margin-bottom:10px ;
    }
    p{
      font-size: 16px;
      color: #999;
    }
  }
}
.form{
 .from-item{
   margin-bottom: 30px;
   padding-bottom:10px ;
   display: flex;
   border-bottom: 1px solid #eee;
   input{
    border: none;
     overflow: none;
     flex: 1;
   }
   img{
      width: 94px;
      height: 31px;
      z-index: 999;
      cursor: pointer;
   }
   button{
    border: 0px;
     font-size: 14px;
     background-color: transparent;
      padding-right: 9px;
     color: rgb(244, 191, 17);
   }
 }
 .denlu-btn{
  color: #eee;
  border: 0px;
    width: 100%;
    height: 40px;
     background: linear-gradient(90deg,#ecb53c,#ff9211);
      box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
      border-radius: 34px;
   }
}
</style>
